<template>
    <div class="page-settings">
        <el-form label-width="100px">
            <el-form-item label="标题文案">
                <el-input :model-value="title" @update:model-value="$emit('update:title', $event)" clearable/>
            </el-form-item>

            <el-form-item label="页面背景">
                <!-- 修改单选按钮绑定 -->
                <el-radio-group :model-value="backgroundType"
                    @update:model-value="$emit('update:background-type', $event)">
                    <el-radio label="color" value="color">纯色</el-radio>
                    <el-radio label="image" value="image">图片</el-radio>
                </el-radio-group>

                <!-- 修改颜色选择器绑定 -->
                <el-color-picker v-if="backgroundType === 'color'" :model-value="bgColor"
                    @update:model-value="$emit('update:bg-color', $event)" show-alpha />

                <el-upload v-else action="#" :show-file-list="false" :before-upload="handleImageUpload">
                    <el-button type="primary">上传背景图</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item label="弹窗广告">
                <el-switch :model-value="popupEnabled" @update:model-value="$emit('update:popup-enabled', $event)" />
            </el-form-item>

            <el-form-item label="导览图">
                <el-switch :model-value="guideEnabled" @update:model-value="$emit('update:guide-enabled', $event)" />
                <div class="tip">用户首次进入时展示引导信息</div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'


// 声明props
const props = defineProps({
    title: String,
    backgroundType: {
        type: String,
        default: 'color'
    },
    bgColor: String,
    popupEnabled: Boolean,
    guideEnabled: Boolean
})

// 声明emits
const emit = defineEmits([
    'update:title',
    'update:background-type',
    'update:bg-color',
    'update:popup-enabled',
    'update:guide-enabled'
])



const handleImageUpload = (file) => {
    // 处理图片上传逻辑
}
</script>